<template>
	<view class="loginBox">
		<img src="/static/xuanchuan/logo.png" class="logo" alt="" />
		<img src="/static/xuanchuan/title.png" class="title-img" alt="" />
		<img src="/static/xuanchuan/hot.png" class="hot" alt="" />
		<img src="/static/xuanchuan/cart.png" class="cart" alt="" />
		<view class="square">
			<div class="square-title" style="margin-top: 0;">
				学车地点
			</div>
			<view class="square-content">
				上海27个场地
			</view>
			<view class="square-content">
				各区域均有练车场
			</view>
			<div class="square-title">
				驾校简介
			</div>
			<view class="square-content">
				学车娃驾考植根于上海，一路走来风雨见彩虹。我们只专注提供最优质服务，让学员亲身感受。对学员的安全负责是我们放在首要的任务。本驾校拥有500余名专业员工100台班车和800余台教练车，所有车辆都是本驾校自行拥有的。练车过程中，我们欢迎所有学员来监督，学员更可自主选择喜欢的教学风格和服务风格。学车娃驾考还有完善的售后服务体系，为您的安全上路保驾护航。我们从不夸大事实，我们只坚持做自己。
			</view>
		</view>
		<view class="inpBox">
			<input class="inp" v-model="phone" placeholder='请输入手机号码' />
			<view class="yzm">
				<input class="inp yzm" v-model="code" placeholder='请输入验证码' />
				<u-button class="btn" type="primary" :disabled="disabled" @click="getCode"
					text="验证码">{{countDownSeconds=="验证码"?countDownSeconds:countDownSeconds+"s"}}</u-button>
			</view>
		</view>

		<view class="btns">
			<u-button class="btn" type="primary" :disabled="applySuccess" @click="getGister">申请试学</u-button>
		</view>
	</view>

</template>

<script>
	import {
		coachInfo,
		yzmCode,
		addInvitation
	} from "@/api/index.js"
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				phone: '',
				email: '',
				password: '',
				username: '',
				code: '',
				countingDown: false,
				countDownSeconds: '验证码',
				disabled: false,
				p_key: '',
				coachInfo: '',
				applySuccess: false,
			}
		},
		onLoad(option) {
			let key = option.code
			coachInfo({
				code: key
			}).then(res => {
				this.coachInfo = res.data
			})
		},
		methods: {
			//验证码
			getCode() {
				let regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
				if (!regex.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				let params = {
					phone: this.phone,
					key: CryptoJS.MD5(this.phone + "_lingjiamao").toString(),

				}

				yzmCode(params).then(res => {
					if (res.code == 1) {
						this.startCountDown();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			startCountDown() {
				this.disabled = true
				this.countingDown = true;
				this.countDownSeconds = 59
				const timer = setInterval(() => {
					if (this.countDownSeconds > 0) {
						this.countDownSeconds--;
					} else {
						this.countingDown = false;
						this.countDownSeconds = '验证码';
						this.disabled = false
						clearInterval(timer);
					}
				}, 1000);
			},
			getGister() {
				let regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
				if (!regex.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				let params = {
					name: '',
					mobile: this.phone,
					teacher: this.coachInfo.teacher,
					org: this.coachInfo.org,
					code: this.code,
				}
				addInvitation(params).then(res => {
					if (res.code == 1) {
						this.applySuccess = true
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						})


					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			goLoginFn() {
				uni.navigateTo({
					url: '/pages/login/login'
				})


			}
		}
	}
</script>

<style scoped lang="scss">
	.loginBox {
		padding: 16rpx 25rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background: url('/static/xuanchuan/background.jpg') no-repeat center;
		background-size: cover;
		padding-bottom: 50rpx;

		.logo {
			display: block;
			width: 233rpx;
		}

		.title-img {
			width: 283rpx;
			display: block;
			margin: 0 auto;
			margin-top: 38rpx;
		}

		.hot {
			width: 581rpx;
			display: block;
			margin: 0 auto;
			margin-top: 51rpx;
		}

		.cart {
			width: 500rpx;
			display: block;
			margin: 0 auto;
			margin-top: 51rpx;
		}

		.square {
			width: 670rpx;
			height: 665rpx;
			background: url('/static/xuanchuan/square.png') no-repeat center;
			background-size: contain;
			padding: 87rpx 45rpx;
			margin: 0 auto;
			margin-top: 40rpx;

			.square-title {
				font-size: 26rpx;
				color: #fff;
				background: #4F4F4F;
				text-align: center;
				line-height: 52rpx;
				height: 52rpx;
				width: 185rpx;
				background: linear-gradient(140deg, #0485e8 0%, #1277cc 100%), #ffa7cd;
				border-radius: 50rpx;
				box-shadow: 4rpx 8rpx 10rpx 2rpx rgba(4, 133, 232, 0.2);
				margin-top: 10rpx;
			}

			.square-content {
				font-size: 25rpx;
				color: #4F4F4F;
				line-height: 36rpx;
				font-weight: Medium;
				margin-top: 10rpx;
			}
		}

		.title {
			font-family: Alimama ShuHeiTi;
			font-size: 40rpx;
			font-weight: 700;
			line-height: 56rpx;
			letter-spacing: 0rpx;
			text-align: left;
			color: #262626;
			margin-top: 34rpx;

			.title2 {
				font-family: PingFang SC;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				letter-spacing: 0rpx;
				text-align: left;
				color: #8C8C8C;
				margin-top: 16rpx;

			}
		}

		.box-title {
			font-size: 26rpx;
			font-weight: 600;
			margin-bottom: 10rpx;

		}

		.inpBox {
			margin: 0 auto;
			margin-top: 30rpx;
			width: 440rpx;

			.inp {
				background: #fff;
				padding: 0rpx 25rpx !important;
				margin-bottom: 24rpx;
				border-radius: 100rpx;
				height: 72rpx;
				color: #222;
				font-size: 20rpx;
				box-sizing: border-box;
			}
		}

		.forget {
			color: #FA430E;
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 36rpx;
			letter-spacing: 0rpx;
			text-align: left;
			text-decoration: underline;
		}

		.btns {
			border-radius: 100rpx;

			.btn {
				width: 216rpx;
				height: 58rpx;
				font-size: 25rpx;
				color: #fff;
				background: #007AD8 !important;
				border-radius: 100rpx;

			}
		}

		.tips {
			color: #8C8C8C;
			font-size: 26rpx;
			text-align: center;
			margin-top: 28rpx;

			.reg {
				color: #FA430E;
			}
		}
	}

	.yzm {
		display: flex;
		align-items: center;

		.inp {
			width: 266rpx;
			color: #9A9A9A;
			font-size: 20rpx;
		}

		.btn {
			width: 150rpx;
			margin-bottom: 24rpx;
			margin-left: 40rpx;
			border-radius: 50px;
			height: 58rpx;
			background: #007AD8 !important;
			font-size: 26rpx;
		}
	}

	input::placeholder {
		color: #9A9A9A;
		font-size: 14px;
	}

	.u-hairline-border[data-v-3bf2dba7]:after {
		border: none !important;
	}

	.no-border-button {
		border: none;
	}
</style>